<template>
  <div class="xadmin-menu">

    <!-- 展示xadmin -->
    <el-row class="tac">
      <el-col :span="4">
        <!-- 展示左边菜单 -->
          <el-menu
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            text-color="#020202"
            active-text-color="#aa0000">
            <el-menu-item index="conf">
              <i class="el-icon-s-tools"></i>
              <span slot="title">配置页面</span>
            </el-menu-item>


            <el-submenu :index="apps.app_info.eng_name" v-for="(apps, index) in url_conf" :key="index">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>{{apps.app_info.chi_name}}</span>
              </template>
              <el-menu-item-group>

                <el-menu-item :index="item.eng_name"
                v-for="(item, number) in apps.label_info" :key="number"
                @click="gotoList(apps.app_info.eng_name,item.eng_name,apps.app_info.chi_name,item.chi_name)">
                  <i class="el-icon-caret-right"></i>
                  {{item.chi_name}}
                </el-menu-item>

              </el-menu-item-group>

            </el-submenu>

            <el-menu-item index="baidu">
              <i class="el-icon-s-opportunity"></i>
              <span slot="title">百度一下</span>
            </el-menu-item>
            <el-menu-item index="google">
              <i class="el-icon-s-help"></i>
              <span slot="title">Google搜索</span>
            </el-menu-item>
          </el-menu>


      </el-col>

      <el-col :span="20" style="padding: 1%;">
        <!-- 面包屑 -->
        <el-card class="box-card">
          <div class="text item">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>

              <el-breadcrumb-item v-for="(item, index) in nav_list" :key="index">{{item}}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
        </el-card>
        
        <!-- 展示本产品用法 -->
        <el-card>

        </el-card>
        <!-- 展示右边详细栏 -->
        <router-view ></router-view>

      </el-col>
    </el-row>





  </div>
</template>

<script>
  export default{
    name:"",
    data(){
      return{
        url_conf:[],
        index_url:"",

        nav_list:[]

      }
    },
    methods:{
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },

      gotoList(app_name, label_name, chi_app_name, chi_label_name){
        console.log(app_name, label_name)
        this.nav_list = []
        this.nav_list.push(chi_app_name)
        this.nav_list.push(chi_label_name)
        this.nav_list.push("操作数据")

        this.$router.push(
          { name: 'xadmin_list', params: { app_name: app_name, label_name: label_name}}
        )
      }

    },
    mounted() {

      // console.log(this.$route.params.menu_dict)
      // console.log(JSON.parse(this.$route.params.menu_dict))
      // console.log("===",this.$route.params)
      let app_id = this.$route.params.app_id
      // 去后台获取本APP信息
      let _this = this
      this.$axios.get(this.$url + 'app_info/' + app_id + '/',{
        headers: {
          'token': this.$store.state.token,
          'Content-Type':'application/json'
        },
      }).then(function (res) {
        // console.log("===",res);
        if(res.status < 300){
          _this.index_url = res.data.index_url
          _this.url_conf = JSON.parse(res.data.menu_dict)


          // console.log("=========",_this.url_conf)
          let app_name = _this.$route.params.app_name
          let label_name = _this.$route.params.label_name
          _this.nav_list.push(app_name)
          _this.nav_list.push(label_name)
          _this.nav_list.push("操作数据")

        }
      })
    }
  }
</script>

<style>
.xadmin-menu{
  background-color: #eaeaea;
  /* height: 90%; */
}
</style>
